import React, {Component, Fragment} from 'react'
import './style.css'
import TodoItem from './TodoItem'
import Test from './practice/Test'
import axios from 'axios'

class TodoList extends Component {
    //最外层只能有一个元素 xml javascript
    //Fragment 顶层站位符号
    // onChange

    constructor(props) {
        // 继承固定的写法
        super(props);
        // 状态 data
        // 当state或者props改变时 render函数就会重新执行
        this.state = {
            iptval: '',
            list: []
        }
        this.handipt = this.handipt.bind(this)
        this.submit = this.submit.bind(this)
        this.handDelt = this.handDelt.bind(this)
        this.keyup = this.keyup.bind(this)

    }

    handipt(e) {
        // console.log(this)
        // console.log(e.target.value)
        // this.setState({
        //     iptval: e.target.value
        // })
        //异步的设置函数
        // console.log(e.target)
        // const val = e.target.value
        const val = this.ipt.value
        this.setState(() => ({iptval: val}))
    }

    submit() {
        this.setState((prev) => ({
            list: [...prev.list, prev.iptval],
            iptval: ''
        }))
    }

    handle(e) {
        console.log(e)
    }

    componentDidMount() {
        axios.get('/todo').then((rrr) => {
            console.log(typeof rrr.data)
            // console.log(JSON)
            // const arr = JSON.parse(rrr.data)
            // console.log(JSON.parse(rrr.data))
            // begin json false later right yes data be obj
            this.setState(()=>{
                return {list: [...rrr.data]}
            })
        }).catch((err) => {
            console.log('failure')
        })
    }

    handDelt(index) {
        // immutable state不允许修改
        // console.log(index)
        let list = [...this.state.list]
        // this.state.list.splice(index,1)
        list.splice(index, 1)
        this.setState({
            list
        })
    }

    keyup(e) {
        if (e.keyCode === 13) {
            this.submit()
        }
    }

    getItem() {
        // key 放在循环最外层
        return this.state.list.map((item, index) => {
            return (
                <TodoItem item={item} index={index} hdd={this.handDelt} key={index}/>
            )
        })
    }

    render() {
        return (
            <Fragment>
                {
                    //这是一个注释示例
                }
                {/*这是一个注释demo*/}
                <div>
                    <label htmlFor="isipt">输入</label>
                    <input
                        id="isipt"
                        className='input'
                        value={this.state.iptval}
                        onChange={this.handipt}
                        onKeyUp={this.keyup}
                        type="text"
                        ref={(ipt) => {
                            this.ipt = ipt
                        }}
                    />
                    <button onClick={this.submit}>提交</button>
                </div>
                <ul>
                    {this.getItem()}
                </ul>
                <Test content={this.state.iptval}/>
            </Fragment>
        )
    }
}

export default TodoList
